    <template >
      <div class="app">
        <div>
          <video_Head :title="title"/>
        </div>
        <div>
          <Video_Head_Control_Back @clientIdAndPlayDate="getClientId" />
        </div>
        <div class="content">
          <div class="up">
            <dv-border-box-8 class="left"  :color="['#18213e','#18213e']">
              <backTimeMap :clientId="clientId" :time="time" v-if="fag"> </backTimeMap>
            </dv-border-box-8>
            <dv-border-box-8 class="right"  :color="['#18213e','#18213e']">  
              <div class="realtime" v-for="(item, index) in BaclUrl" :key="index">
                      <div style="height: 34.5vh;">
                      <Customize_flv :url="item" :channel="index+1" v-if="fag"/>
                    </div>
                  </div>
            </dv-border-box-8>
          </div>
          <div class="down">
            <div class="timeline">
              <div style="background-color: #545a5b;width: 100%;height: 2px;"></div>
              <Timeline :clientIdAndPlayDate="clientIdAndPlayDate" @time="getTime"  @distinct="getDistinct"/>
            </div>
          </div>
        </div>
      </div>
    </template>
      
    <script>
    import api from "@/api/api";
    import Video_Head_Control_Back from "@/components/video/Video_Head_Control_Back"
    import Timeline from "@/components/video/TimeLine";
    import backTimeMap from "@/components/video/Back_Time_Map"
    import video_Head from "@/components/video/Video_head"
    import Customize_flv from "@/components/video/Customize_Flv";
    import { ElNotification } from 'element-plus';
    export default {
      props: {

      },
      components: {  Video_Head_Control_Back,Customize_flv, Timeline,backTimeMap,video_Head },
      data: function () {
        return {
          fag: false,
          content: '',
          clientId: "",
          list: [],
          channelNo: 1,
          mediaType: 0,
          BaclUrl: [],
          time:[],
          url: "",
          title:"flv回放视频",
          clientIdAndPlayDate:[],
         
        }
      },
      mounted() {
      },
      methods: {
        getClientId(val) {
          this.fag = false;
          this.clientId = val[0];
          this.clientIdAndPlayDate=val;
          this.time=[]
        },
       
        getplay() {
              this.fag = true;
              this.BaclUrl = this.url
              if (this.BaclUrl.length <= 0) {
                  ElNotification({ title: '错误', message: '获取视频失败', type: 'error', })
              }
          },
        //排序url
        sort(value){
          // 提取链接中的最后一个数字，并与链接一起存储为键值对
          const sortedLinks = value.map(link => {
          const lastNumber = parseInt(link.split('-').pop());
            return { link, lastNumber };
          });
          // 按最后一个数字进行排序
          sortedLinks.sort((a, b) => a.lastNumber - b.lastNumber);
          // 仅输出排序后的链接
          return sortedLinks.map(obj => obj.link);
        },
        getTime(val){
          this.time=val;
          if (val!=null) {
            this.realTimeUrl = [];
            this.url = [];
            this.fag = false;
            // 分割第一个时间字符串
            const firstTime = val[0].replace(/[- :]/g, '').substring(2);
            const secondTime = val[1].replace(/[- :]/g, '').substring(2);
            const distinct=val[2];
            for (var i = 1; i < 5; i++) {
                  const result =  api.getBackVideo(this.clientId, i, this.mediaType, distinct,0,0,0,firstTime,secondTime)
                  result.then(res=>{
                  if (res.code == 0) {
                    if(i==0){
                      ElNotification({ title: '成功', message: '等待视频播放', type: 'success', })
                    }
                      this.url.push(res.data.url);
                  } else {
                      ElNotification({ title: '警告', message: res.msg, type: 'warning', })
                      return;
                  }
                  }) 
            }
            setTimeout(res => this.getplay(), 500)
          }
        },
        getDistinct(val){

        }
      }
    }

    </script>
    <style scoped>
    .realtime {
      width: 50%;
      float: left;
      text-align: center;
    }
    .app{
    height: 100vh;
    background-image: url("../../assets/img/pageBg.png");
    }
    /* 控制按钮 */
    .content {
      width: 100%;
      height: 84vh;
    }

    .up {
      width: 100%;
      height: 69vh;
    }

    .down {
      width: 98%;
      margin-left: 1%;
      margin-top: 5px;
      height: 11vh;
    }

    .left {
      width: 52%;
      height: 69vh;
      background-color: rgb(17, 16, 16);
      margin-left: 1%;
      float: left;
    }

    .right {
      width: 46%;
      float: left;
      height: 69vh;
      margin-left: 2px;
      background-color: rgb(17, 16, 16);
    }
    .rtvsBack{
      margin-top: 10px;
      margin-left: 10px;
    }
.line{
  height: 30px;
}

    .timeline {
      width: 100%;
      height: 145px;
      background-color: #111010;
      color: white;
    }

    :deep(.el-input) {
      background-color: #10191b;
    }

    :deep(.el-input__wrapper) {
      background-color: #10191b;
    }

    :deep(.el-input__inner) {
      color: white;
    }
    </style>
      